<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>nodom-example start</title>
		<style>
			.c1{
				color:white;
			}
			.c2{
				color:yellow;
			}
		</style>
		</head>

	<body>
		
	</body>
	<script type='module'>
		import{Nodom,Module} from '/dist/nodom.esm.js'
		export class m1 extends Module{
			template(){
				return `<div>
					<h3>m1</h3>
					<slot></slot>
				</div>`
			}
		}

		export class m2 extends Module{
			template(){
				return `
					<div>
						<p>m2</p>
						<div x-repeat={{rows}}>
							{{title}}
						</div>
					</div>
				`
			}
		}

		export class m3 extends Module{
			template(){
				return `
					<div>
						<p>m3</p>
						<div>name:{{name}}</div>
					</div>
				`
			}
		}

		class btn extends Module{
			template(){
				return `
					<button>{{title}}</button>
				`
			}
		}

		export class main extends Module{
			modules=[m1,m2,m3,btn];
			template(){
				return `
					<div>
						<button e-click='change'>change</button>
						<!--<m1 x-model='d1'>
							<div>姓名：{{myname}}</div>
							<m2 $rows={{rows}}/>
							<m3 $name={{myname}} />
						</m1>-->
						<btn x-repeat={{d1.rows}} $title={{title}}/>
					</div>
				`
			}

			data(){
				return{
					d1:{
						rows:[{title:'aaa'},{title:'bbb'}],
						myname:'yang'
					}
				}
			}
		}

		Nodom.app(main);
		
	</script>
</html>
